<template>
  <div class="index-container" ref="rateContainer">
    <ShopRateScore :shopID="shopID"></ShopRateScore>
    <section class="index-rateDetail">
      <div class="index-tagBlock">
        <ul>
          <li v-for="(tag,index) in ratingTags" :key="index" :class="{'rating-tags-item':true,'rating-tags-active':index===currentTag,'rating-tags-unsatisfied':tag.unsatisfied}">{{tag.name}}({{tag.count}})</li>
        </ul>
      </div>

      <ul>
        <ShopRateItem  v-for="(rating,index) in ratings" :key="index" :rate ="rating"></ShopRateItem>
        <mugen-scroll scrollContainer="rateContainer" :handler="fetchScoreData" :should-handle="!loading">
          <img src="../../../static/images/loading.eleme.gif" alt="加载中">
        </mugen-scroll>
      </ul>
    </section>
  </div>

</template>
<script>
  import ShopRateScore from './ShopRateScore.vue'
  import ShopRateItem from './ShopRateItem.vue'
  import MugenScroll from 'vue-mugen-scroll';
  import ShopAPI from '../../exchange/shopAPI.js'
  export default {
    name: 'ShopRate',
    data () {
      return {
        loading: false,
        ratingTags: [],
        pageIndex: 0,
        ratings: [],
        currentTag: 0
      }
    },
    props: {
      shopID: {
        type: String
      }
    },
    created () {
      ShopAPI.getRatingTags(this.shopID).then(res => {
        this.ratingTags = res.datas
        this.$el.style.height = (window.innerHeight - 127) + 'px'
      })
    },
    filters: {
      formatImg: function (value) {
        return 'https://fuss10.elemecdn.com/' + value.charAt(0) + '/' + value.substr(1, 2) + '/' + value.slice(3) + '.jpeg?imageMogr/format/webp/thumbnail/!142x142r/gravity/Center/crop/142x142/'
      }
    },
    methods: {
      getData () {
        ShopAPI.getShopRatings(this.shopID, this.pageIndex++).then(res => {
          if (res.errno === 0) {
            if (this.pageIndex === 1) {
              this.ratings = res.datas
              this.loading = false
            } else {
              this.ratings = this.ratings.concat(res.datas.sort(function (a, b) { return Math.random() > 0.5 ? -1 : 1; }));
              this.loading = false;
            }
          }
        })
      },
      fetchScoreData () {
        this.loading = true;
        this.getData();
        this.loading = false;
      }
    },
    components: {
      ShopRateScore, MugenScroll, ShopRateItem
    }
  }
</script>
<style>
.mugen-scroll{text-align:center;padding:10px 0;}
</style>
